<template>

  <div class="order">
    
    <div class="order_top">订单信息</div>

    <div class="order_info">
      <div class="order_part_one flex">
        <div class="order_info_l">
          <p>订单编号：{{info.ordersn}}</p>
          <p>下单时间：{{info.dateline}}</p>
          <p>预约时间：{{info.cancel_time}}</p>
          <p>支付方式：<sapn v-if="info.pay_type == 1">余额支付</sapn><sapn v-if="info.pay_type == 2">在线支付</sapn><sapn v-if="info.pay_type == 4">次卡支付</sapn></p>
        </div>
        <div class="order_info_r">
          <p class="order_state">已取消</p>
          <p class="order_money">{{info.paymoney}}元</p>
        </div>        
      </div>
      <div class="order_part_two">
        <p>小伙伴：{{info.worker_name}}</p>
        <p>车辆：{{info.mycar}}</p>
        <p>地址：{{info.address}}</p>
        <p>地址详情：{{info.addr_detail}}</p>
        <p>取消理由：{{info.cancel_reason}}</p>
      </div>
    </div>

  </div>
  
</template>

<script>
import axios from 'axios'
import global from '../../../utils/global'
import store from '../../../utils/store'
export default {
  name: 'Ordering',
  data () {
    return {
      info: {},
    }
  },
  mounted(){
    this.getInfo();
    this.$root.share();
  },
  methods: {
    getInfo(){
      var that = this;
      axios.get(global.api.order.customer.info,{
        params: {
          uuid: localStorage.getItem('carWashUuid'),
          order_id: global.order_id,
        }
      })
      .then(function(res){
        console.log("ordering then");
        console.log(res);
        that.info = res.data.order;
      })
      .catch(function(res){
        console.log("ordering catch");
        console.log(res);
      }) 
    },
  },
}
</script>

<style scoped>
  .order{

  }
  .order_top{
    color: #2ecc80;
    text-align: left;
    height: 3rem;
    line-height: 3rem;
    border-bottom: 1px solid #B3B3B4;
    padding-left: 1rem;
    font-size: 1.1rem;
  }
  .order_info{
    text-align: left;
    border-bottom: 1px solid #B3B3B4;
    box-shadow: 0 0.6rem 0 0 #E5E5E6;
    margin-bottom: 0.6rem;
    padding: 1rem;
  }
  .order_info p{
    font-size: 0.9rem;
    margin: 0;
    padding: 0;
    line-height: 1.7rem;
  }
  .order_part_one{
    justify-content: space-between;
    align-items: flex-start;
  }
  .order_part_two{

  }
  .order_info_l{

  }
  .order_info_r{
    text-align: right;
  }
  .order_info_r .order_state{
    color: #2ecc80;
  }
  .order_info_r .order_money{
    font-size: 1.4rem;
    line-height: 2rem;
  }
</style>

<style>
  ul,li,div,a,p,span{
    margin: 0;
    padding: 0;
  }
  li{
    list-style: none;
  }
  .flex{
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
  }
  .side_start{
    justify-content: space-between;
    align-items: flex-start;
  }
</style>
